<template>
	<view class="forget">
		<view class="logo">
			<image :src="logo" mode=""></image>
		</view>
		
		<view class="info">
			<view class="box" >
				<view class="title">会员编号</view>
				<view class="inp">
					<input type="text" placeholder="请输入会员编号" placeholder-class="cl" v-model="phone" maxlength="11" />
				</view>
			</view>
			
			<view class="box">
				<view class="title">验证码</view>
				<view class="inp">
					<input type="text" placeholder="请输入验证码" placeholder-class="cl" v-model="code" />
				</view>
				
				<view class="code" v-if="!countDown" @click="getCode">{{ codeText }}</view>
				
				<view class="code" v-if="countDown">
					<u-count-down :timestamp="timestamp"
						 :show-days="false" :show-hours="false" :show-minutes="false"
						 @change="changes" @end="countDownEnd"
						 bg-color="#f81149" color="#fff"></u-count-down>s
				</view>
			</view>
			
			<view class="box" >
				<view class="title">登录密码</view>
				<view class="inp">
					<input type="password" placeholder="请重新设置登录密码" placeholder-class="cl" v-model="password" />
				</view>
			</view>
			
			<view class="box" >
				<view class="title">确认密码</view>
				<view class="inp">
					<input type="password" placeholder="请确认登录密码" placeholder-class="cl" v-model="password2" />
				</view>
			</view>
		</view>

		<view class="btn" @click="forget()" v-if="status == 1">确认修改</view>
		<view class="btn" v-else>确认修改</view>
	</view>
</template>

<script>
	import service from '@/store/service.js';
	export default {
		data() {
			return {
				logo:'',
				countDown:false,
				timestamp:59,
				codeText:'验证码',
				phone:'',
				code:'',
				password:'',
				password2:'',
				status:1,
			}
		},
		onLoad: function(e) {
			var self = this
			self.$http.get(service.api.login.info).then(function(res) {
				self.logo = res.data.site_icon
			});
		},
		methods: {
			//确认修改
			forget(){
				let that = this
				if (!that.phone) {
					that.$api.msg('请输入会员编号');
					return;
				}
				
				if (!that.password) {
					that.$api.msg('请输入新的登录密码');
					return;
				}
				
				if (that.password != that.password2) {
					that.$api.msg('两次输入的登录密码不一致');
					return;
				}
				
				that.status = 0;
				that.$http.post(service.api.login.forgetPwd,{
					mobile:that.phone,
					password:that.password,
					repassword:that.password2,
					code:that.code
				}).then(res=>{
					that.$api.msg(res.info);
					if(res.code === 1){
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/login/login'
							});
						}, 1500);
					}else{
						that.status = 1;
					}
				})
			},
			//获取验证码
			getCode(){
				let that = this;
				if (that.phone == '') {
					that.$api.msg('请输入会员编号');
					return;
				}
				//手机号码正则验证
				/* if (!/^1[3-9][0-9]\d{8,11}$/.test(that.phone)) {
					uni.showToast({
						icon: 'none',
						title: '会员编号格式不正确'
					});
					return;
				} */
				
				that.$http.get(service.api.login.code, {
					mobile: that.phone,
					temp: 'sms_forget'
				}).then(function(res) {
					that.$api.msg(res.info);
					if (res.code === 1) {
						that.countDown = !that.countDown;
						that.codeText = '重新获取验证码';
					}
				});
			},
			//倒计时结束触发
			countDownEnd(){
				this.codeText = '重新获取'
				this.countDown = !this.countDown
			},
			changes(){
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/common/uni.css';
	page{
		background: #fff;
	}
	.logo{
		display: flex;
		align-items: center;
		justify-content: center;
		image{
			width: 200upx;
			height: 200upx;
			margin-top: 120upx;
		}
	}
	.forget {
		height: 100%;
		overflow: hidden;
		.info {
			padding: 60upx;
			.box {
				color: #999999;
				padding: 26upx 0;
				position: relative;
				border-bottom: 2upx solid #F3F3F3;
				.title {
					font-size: 28upx;
				}

				.inp {
					input{
						color: #333333;
						font-size: 32upx;
						font-weight: bold;
					}
					
					.cl {
						color: #999999;
						font-size: 32upx;
						font-weight: 400;
					}
				}

				.code {
					right: 0;
					bottom: 34upx;
					width: 136upx;
					height: 58upx;
					color: #ffffff;
					line-height: 58upx;
					text-align: center;
					position: absolute;
					border-radius: 30upx;
					background: #f81149;
				}
			}
		}

		.btn {
			width: 630upx;
			height: 100upx;
			color: #ffffff;
			font-size: 36upx;
			text-align: center;
			line-height: 100upx;
			border-radius: 50upx;
			background: #f81149;
			margin: 20upx auto 0 auto;
		}
	}
</style>
